<template>
  <!-- 定义在这里的参数都是不可在外部覆盖的，防止出现问题 -->
  <Z-select-biz-component
    :value="value"
    :ellipsisLength="25"
    :listUrl="url.list"
    :columns="columns"
    :multiple="multiple"
    :buttons="false"
    v-on="$listeners"
    v-bind="attrs"
  />
</template>

<script>
import ZSelectBizComponent from './ZSelectBizComponent'

export default {
  name: 'ZSelectMultiUser',
  components: { ZSelectBizComponent },
  props: {
    value: String,
    multiple: {
      type: Boolean,
      default: () => true
    }
  },
  data() {
    return {
      url: { list: '/user/list' },
      columns: [
        { type: this.multiple ? 'checkbox' : 'radio', width: 40 },
        { title: '姓名', align: 'center', field: 'nickname' },
        { title: '账号', align: 'center', field: 'username' },
        { title: '电话', align: 'center', field: 'phone' },
        { title: '出生日期', align: 'center', field: 'birthday' }
      ],
      // 定义在这里的参数都是可以在外部传递覆盖的，可以更灵活的定制化使用的组件
      default: {
        name: '用户',
        width: 1200,
        displayKey: 'nickname',
        returnKeys: ['id', 'username'],
        queryParamCode: 'nickname',
        queryParamText: '姓名'
      }
    }
  },
  computed: {
    attrs() {
      return Object.assign(this.default, this.$attrs)
    }
  }
}
</script>

<style lang="less" scoped></style>
